<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>个人信息页面</title>
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" th:href="@{/css/ownerInfo.css}">


</head>

<body>
    <div class="return_index">
        <a th:href="@{|/page/${1}/${session.user.getUserId()}|}">返回首页</a>
    </div>

    <div class="info_container">

        <div class="ownerInfo">

            <div class="container">
                <div class="left-box">
                    <ul>
                        <li class="active">
                            <i class="fa fa-thumbs-o-up"></i>
                            <a>个人信息</a>
                        </li>
                        <li>
                            <i class="fa fa-heart-o"></i>
                            <a>更换头像</a>

                        </li>
                        <li>
                            <i class="fa fa-star-o"></i>
                            <a>备用邮箱</a>
                        </li>
                        <li>
                            <i class="fa fa-share-square-o"></i>
                            <a>绑定手机号</a>
                        </li>
                    </ul>
                </div>

                <div class="border">
                    <div class="line line1"></div>
                </div>

                <div class="right-box">
                    <div class="rb active">
<!--                        <i class="fa fa-thumbs-o-up"></i>-->
                        <h1>个人信息</h1>
                        <div class="context">
                            <img th:src="@{|/userImg/${session.user.getUserImg()}|}">
                            <label>你的账号</label>
                            <p th:text="${session.user.getAccountNo()}">lzj123</p>
                            <label>你的密码</label>
                            <p th:text="${session.user.getPassword()}">123456</p>
                            <label>你的余额</label>
                            <p>1000元</p>
                            <label>你的消费</label>
                            <p>200元</p>
                            <label>你的邮箱</label>
                            <p th:text="${session.user.getUserEmail()}">2421070452@qq.com</p>
                            <label>你的手机号</label>
                            <p th:text="${session.user.getTelephone()}">18377731569</p>
                        </div>
                    </div>

                    <div class="rb">
                        <h1>更换头像</h1>

                        <div class="chooseHearImg">
                            <img th:src="@{|/userImg/${session.user.getUserImg()}|}">

                            <div class="img_file">
                                <form th:action="@{|/userInfo/modifyHeadImg|}" method="post" enctype="multipart/form-data">
                                    <input type="hidden" name="userid" th:value="${session.user.getUserId()}">
                                    <input type="file" name="myFile" placeholder="请选择头像"/><br>
                                    <input type="submit" value="上传头像"/>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="rb">
                        <h1>添加邮箱</h1>
                        <div class="addEmail">

                            <div class="email_context">
                                <form id="email_form" th:action="@{/userInfo/modifyEmail}" method="post">
                                    <p>你的手机号</p>
                                    <input type="hidden" name="userid" th:value="${session.user.getUserId()}">
                                    <input name="telephone" type="text" th:value="${session.user.getTelephone()}">
                                    <button id="getCode" onclick="emailCode()" type="button">获取验证码</button>
                                    <input type="text" name="check" placeholder="请输入正确的手机验证码">
                                    <p>新的邮箱</p>
                                    <input type="text" name="email" value="2421070452@qq.com">
                                    <div class="form-item">
                                        <div>
                                            <p>验证码</p>
                                            <div class="check-box">
                                                <input type="text" name="verifyCode" placeholder="" />
                                                <img id="email" src="http://172.24.165.54:8080/defaultKaptchaEmail" title="点击刷新" alt="看不清？换一张" />
                                            </div>
                                        </div>
<!--                                        <span class="errMess">请输入正确的系统验证码</span>-->
                                    </div>
                                    <button type="submit">添加</button>
                                </form>

                            </div>

                        </div>

                    </div>
                    <div class="rb">
<!--                        <i class="fa fa-share-square-o"></i>-->
                        <h1>修改绑定手机号</h1>
                        <div class="addEmail">

                            <div class="email_context">
                                <form id="phone_form" th:action="@{/userInfo/modifyPhoneNo}" method="post">
                                    <p>你的手机号</p>
                                    <input type="hidden" name="userid" th:value="${session.user.getUserId()}">
                                    <input type="text" name="telephone" value="18377731569">
                                    <input id="getCode_phone" onclick="modifyPhoneCode()" type="button" value="获取验证码">
                                    <input type="text" name="check" placeholder="请输入正确的手机验证码">
                                    <p>新的手机号</p>
                                    <input type="text" name="newPhone">
                                    <div class="form-item">
                                        <div>
                                            <p>验证码</p>
                                            <div class="check-box">
                                                <input type="text" name="verifyCode" placeholder="" />
                                                <img id="phone" src="http://172.24.165.54:8080/defaultKaptchaPhone" title="点击刷新" alt="看不清？换一张" />
                                            </div>
                                        </div>
                                        <span class="errMess">请输入正确的系统验证码</span>
                                    </div>
                                    <button type="submit">注册</button>
                                </form>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--script只能放在下面-->
    <script th:src="@{/script/ownerInfo.js}"></script>

</body>

</html>


